// 用户管理js
new Vue({
    // 绑定主要操作区域
    el: "#app",
    data() {
        return {
            // 对话框的可见性
            editDialogVisible: false,
            addDialogVisible: false,
            // 表格数据
            tableData: [],
            // 总记录数
            total: 0,

            //查询参数
            searchForm: {
                current: 1,
                pageSize: 10
            },

            // 新增和编辑表单数据
            addDlgForm: {},
            editDlgForm: {}
        }
    },
    methods: {
        // /**
        //  * 通用请求方法，处理POST、GET、PUT、DELETE请求
        //  * @param {string} url - 请求路径
        //  * @param {string} method - 请求方法
        //  * @param {Object} data - 请求数据
        //  * @returns {Promise} 返回axios请求的promise
        //  */
        // requestData(url, method, data = {}) {
        //     return axios({ url, method, data }).catch(error => {
        //         this.$message.error('请求失败，请稍后再试');
        //         console.error(error);
        //     });
        // },
        /**
         * 获取用户列表数据
         */
        fetchData() {
            // 发起ajax请求
            axios.post('/user/query', this.searchForm)
                .then(res => {
                    if (res && res.data) {
                        this.tableData = res.data.data.list;
                        this.total = res.data.data.total;
                    }
                });
        },

        /**
         * 获取表格中每行的序号
         * @param {number} index - 当前行的索引
         * @returns {number} - 计算后的序号
         */
        indexMethod(index) {
            return (this.searchForm.current - 1) * this.searchForm.pageSize + index + 1;
        },

        /**
         * 改变每页显示的数据条数
         * @param {number} pageSize - 每页显示的条数
         */
        handleSizeChange(pageSize) {
            this.searchForm.pageSize = pageSize;
            this.searchForm.current = 1;
            this.fetchData();
        },


        // 跳转到指定页
        handleCurrentChange(current) {
            this.searchForm.current = current;
            this.fetchData();
        },
        // 打开添加用户对话框
        openAddDialog(id, op) {
            this.addDialogVisible = true;
            console.log(this.addDialogVisible)
            //清空表单数据
            this.addDlgForm = {}
        },

        /**
         * 处理添加用户
         * @param {string} formName - 表单的ref名称
         */
        handleAdd(formName) {
            // 表单验证通过后提交数据
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 发起后端请求
                    axios.post('/user', this.addDlgForm)
                        .then(res => {
                            if (res && res.data.code === 200) {
                                this.$notify({
                                    title: '成功',
                                    message: '用户添加成功',
                                    type: 'success'
                                });

                                this.addDialogVisible = false;
                                this.addDlgForm = {} // 清空表单数据
                                this.refresh();
                            } else {
                                this.$notify({
                                    title: '操作失败',
                                    message: res.data.message,
                                    type: 'error'
                                });
                            }
                        });
                }
            })
        },

        /**
         * 打开编辑用户的对话框
         * @param {number} id - 用户ID
         */
        openEditDialog(id) {
            // 获取后端数据对象
            axios.get('/user/' + id)
                .then(res => {
                    if (res && res.data.code === 200) {
                        this.editDlgForm = res.data.data;
                        this.editDialogVisible = true;
                    } else {
                        this.$message.error('数据加载失败')
                    }
                });
        },

        /**
         * 更新用户数据
         * @param {string} formName - 表单的ref名称
         */
        handleUpdate(formName) {
            console.log(formName)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 构造需要更新的数据
                    let updateObj = this.editDlgForm;
                    // let updateObj = {
                    //     id: this.editDlgForm.id,
                    //     email: this.editDlgForm.email,
                    //     remark: this.editDlgForm.remark,
                    //     mobilePhone: this.editDlgForm.mobilePhone,
                    //     status: this.editDlgForm.status,
                    //     avatarUrl: this.editDlgForm.avatarUrl
                    // }
                    // 发起后端请求
                    axios.put('/user', updateObj)
                        .then(res => {
                            // 判断是否成功
                            if (res && res.data.code === 200) {
                                this.editDialogVisible = false;
                                this.$notify({
                                    title: '成功',
                                    message: '数据更新成功',
                                    type: 'success'
                                });
                                this.refresh()
                                this.$refs[formName].resetFields();
                            } else {
                                alert(res.data.message);
                            }
                        });
                } else {
                    console.log('数据校验失败..')
                    return;
                }
            })
        },

        /**
         * 用户查询方法，根据搜索条件查询数据
         */
        query() {
            this.fetchData();
        },

        /**
         * 删除用户
         * @param {number} id - 用户ID
         */
        handleDelete(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //进人删除流程，向后台发起请求
                axios.delete('/user/' + id)
                    .then(res => {
                        if (res && res.data.code === 200) {
                            this.refresh();
                        } else {
                            console.log('删除失败!')
                        }
                    });
                this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success'
                });
            }).catch(() => {
            });
        },

        /**
         * 重置查询参数并重新加载数据
         */
        refresh() {
            this.searchForm = {
                current: 1,
                pageSize: 10
            };
            this.fetchData();
        },
        /**
         * 处理表格的排序
         * @param {Object} column - 排序的列信息
         */
        sortColumn(column) {
            this.searchForm.column = column.prop;
            this.searchForm.order = column.order;
            this.fetchData();
        }
    },

    /**
     * 在组件创建时获取初始数据
     */
    created() {
        this.fetchData();
    },
});